<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市区三级联动</title>
	<style>
		#CnCity{
			width:280px;position:relative;
			border: 1px solid #ccc;font-size: 12px;padding: 4px 8px;
	    outline: 0;box-sizing:border-box;cursor: pointer;
		}
		.city-title{
			width:100%;white-space: nowrap;overflow: hidden;
			text-overflow: ellipsis;color:#ccc;
		}
		.city-component{
			width:100%;position:absolute;top:26px;left:0px;
			display:none;z-index:999;
		}
		.city-select-tab{
   		border-right: 1px solid #ccc;
    	border-top: 1px solid #ccc;
    	width: 100%;height: 35px;
      background: #f0f0f0;box-sizing:border-box;
      display:flex;
		}
		.city-select-tab a{
			text-decoration: none;color: #333;
			flex-grow:1;text-align: center;line-height: 33px;
			border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;
		}
		.city-select-tab a.current{
			background: #fff;border-bottom: 1px solid #fff;color: #f60;
		}
		.city-select-content{
			width:100%;
		}
		.city-select{
			border: 1px #ccc solid;border-top: 0;
    	padding: 10px 15px;box-sizing:border-box;
    	width: 100%;background: #fff;font-size: 12px;
		}
		.city-select a{
			text-decoration: none;color: #333;
			display: inline-block; padding: 5px 10px;
    	outline: 0;margin-top:5px;
		}
		.city-select a.current{
			background-color: #f60;color: #fff;border-radius: 2px;
		}
  </style>
</head>
<body>
	
	<div id="CnCity"></div>

<script src="jquery-3.2.1.min.js"></script>
<script src="pcas-location.js"></script>
<script>
	
	class pcasLocation{
		constructor(idName){
			this.cityBox = $("#"+idName);
			this.chinaData = (new Location()).citys;
			this.citys;
			this.areas;
			this.streets;
			this.address = Array(4);
			this.isShow = true;
			this.init();
		}

		init(){
			this.defaultHtml(this.cityBox);
			this.defaultProvince(this.chinaData);
			//点击省份事件
			this.selected("city-province", 0, "city-city", "city");
			//点击地级市事件
			this.selected("city-city", 1, "city-area", "area");
			//点击县级市事件
			this.selected("city-area", 2, "city-street", "street");
			//点击街道事件
			this.selected("city-street", 3, "", "");
			this.bindTab();
			this.bindTitle(this.isShow);
		}
		defaultHtml(dom){
			let html = `
				<div class="city-title">请选择省市区</div>
					<div class="city-component">
						<div class="city-select-tab">
							<a href="javascript:;" class="current" id="province">省份</a>
							<a href="javascript:;" class="" id="city">城市</a>
							<a href="javascript:;" class="" id="area">县区</a>
							<a href="javascript:;" class="" id="street">街道</a>
						</div>
						<div class="city-select-content">
							<div class="city-select city-province"></div>
							<div class="city-select city-city" style="display:none;"></div>
							<div class="city-select city-area" style="display:none;"></div>
							<div class="city-select city-street" style="display:none;"></div>
						</div>
					</div>
			           `;
			dom.html(html); 
		}
		defaultProvince(chinArr){
			let str = "";
			chinArr.forEach(function(e,i,arr){
				str += ` 
			    <a title="${e.name}" code="${e.code}" href="javascript:;" class="province(event)" >${e.name}</a>
			         `;
			});
			$(".city-province").append(str);
		}
		selected(className, index, nextClassName, nextIdName){
			let that = this;
			$("."+className).on("click","a",function(){
				//选择地区颜色变化
				$("."+className+" a").removeClass("current");
		  	$(this).addClass("current");
		  	//获取选中地区的value
		  	let value = $(this).attr("title");
		  	//如果是省份选择，清空address数组
		  	if(index == 0){
		  		that.address.forEach(function(e,i,arr){
			  		delete that.address[i];
			  	});
		  	}
		  	that.address[index] = value;
		  	that.returnResult(that.address);

		  	let	arrSelect;
		    switch(index){
		    	case 0:
		    		arrSelect = that.getData(value, that.chinaData); //获取选中的省份的全部数据
		    		break;
		    	case 1:
		    		arrSelect = that.getData(value, that.citys); //获取选中的地级市的全部数据
		    		break;
		    	case 2:
		    		arrSelect = that.getData(value, that.areas); //获取选中的县级市的全部数据
		    		break;	
		    	default:
		    		arrSelect = 0;
		    		break;
		    }
		    //判断是否有children属性
		  	if(that.findChildren(arrSelect)){
		  			$(".city-select").css("display","none");
		  			$("."+nextClassName).css("display","block");
						$(".city-select-tab a").removeClass("current");
						$("#"+nextIdName).addClass("current");

					$("."+nextClassName).empty();
					$("."+nextClassName).append(that.loadHtml(arrSelect).html);

					switch(index){
			    	case 0:
			    		that.citys = that.loadHtml(arrSelect).data;  //获得子级全部数据
			    		break;
			    	case 1:
			    		that.areas = that.loadHtml(arrSelect).data;  //获得子级全部数据
			    		break;
			    	default:
			    		that.streets = that.loadHtml(arrSelect).data;  //获得子级全部数据
			    		break;
			    }

		  	}else{
		  		$(".city-component").slideUp();
		  		that.isShow = true;
		  	}
			});
		}
		getData(str, arr){
			let data;
			arr.forEach(function(e,i,arr){
				if(e.name == str){
					data = e;
				}
			});
			return data;
		}
		findChildren(obj){
			for(var name in obj){
				if(obj.hasOwnProperty("children")){
					return true;
				}else{
					return false;
				}
			}
		}
		loadHtml(obj){
			let str = "";
			let data = obj.children;
			obj.children.forEach(function(e,i,arr){
				str += `
					<a title="${e.name}" code="${e.code}" href="javascript:;" class="">${e.name}</a>
				       `;
			});
			return {"html":str , "data":data};
		}
		returnResult(arr){
			let result = arr[0];
			//判断后面是否为空，为空就不显示"-"
			arr.forEach(function(e,i,arr){
				if(i>0){
					if(e != undefined){
						result += "-";
						result += e;
					}
				}
			});
			$(".city-title").html(result);
			$(".city-title").css("color","#000");
		}
		bindTab(){
			$(".city-select-tab a").each(function(i){
				$(this).on("click",function(){
					$(".city-select-tab a").removeClass("current");
					$(this).addClass("current");
					$(".city-select").css("display","none");
					$(".city-select-content .city-select").eq(i).css("display","block");
				})
			});
		}
		bindTitle(isShow){
			$(".city-title").click(function(){
				if(isShow){
					$(".city-component").slideDown();
					isShow = false;
				}else{
					$(".city-component").slideUp();
					isShow = true;
				}
			});
		}
	}

/***************************************/
var cicySelect = new pcasLocation("CnCity");

	
</script>
</body>
</html>